<template>
	<view class="page-content">
		<image class="back" src="@/static/login/login-back.png" mode="scaleToFill" />
		<image class="back back-mask" src="@/static/login/login-mask.png" mode="scaleToFill" />

		<view class="loginMain">
			<view class="loginWay" v-show="!loginWay">
				<view class="wxlogin">
					<button style="border: none;background-color: #2c68f6;color: #fff;margin-bottom: 40rpx;"
						open-type="getPhoneNumber" @getphonenumber="getphonenumber">手机号快捷登录</button>
					<button style="border: none;background: rgba(255, 255, 255, 0.3);color: #fff"
						@click="loginWay = 1">手机号验证码登录</button>
				</view>
			</view>


			<view class="form" v-show="loginWay">
				<view class="formTitle">
					手机号登录
				</view>
				<up-form errorType="toast" labelPosition="top" :model="loginParams" ref="formRef" labelWidth="100">
					<up-form-item label="" prop="phoneNumber">
						<view class="phone-formItem"
							style="background: rgba(121, 106, 138, 0.2);border: 1px solid #5a5378;width: 100%;height: 100%;padding: 10px 10rpx;border-radius: 14rpx;display: flex;align-items: center;">
							<up-input border="none" color="#fff" prefixIcon="phone" prefixIconStyle="color: #fff"
								placeholder="请输入手机号" v-model="loginParams.phoneNumber"></up-input>
							<template #right>
								<view class="wrap" style="height: fit-content">
									<up-toast ref="uToastRef"></up-toast>
									<up-code :seconds="seconds" @end="end" @start="start" ref="uCodeRef"
										@change="codeChange"></up-code>
									<up-button :customStyle="{ 'color': '#fff', 'height': 'fit-content' }"
										type="default" :hairline="false" class="zlcButton"
										@tap="getCode">{{tips}}</up-button>
								</view>
							</template>
						</view>
					</up-form-item>
					<up-form-item label="" prop="validCode">
						<view class="code-formItem"
							style="background: rgba(121, 106, 138, 0.2);margin: 40rpx 0;border: 1px solid #5a5378;width: 100%;height: 100%;padding: 10px 0 10px 10rpx;border-radius: 14rpx;">
							<up-input border="none" color="#fff" prefixIcon="chat" prefixIconStyle="color: #fff"
								placeholder="请输入验证码" v-model="loginParams.validCode"></up-input>

						</view>

					</up-form-item>
					<up-form-item>
						<view class="loginOperate">
							<view class="phoneLoginHandler" @click="loginWay = 0">
								手机号快捷登录
							</view>
							<view class="loginHandler" style="color: #fff;background: #015edf;" @click="phoneLoginFn">
								登录
							</view>
						</view>

					</up-form-item>
				</up-form>
			</view>
		</view>

		<view class="check-box">
			<up-checkbox-group class="checkbox-group" v-model="checkboxValue1" @change="changeCheckbox"
				placement="column" shape="circle">
				<up-checkbox :name="true">
				</up-checkbox>
			</up-checkbox-group>
			<text @click="flagChechkbox">我已知晓并确认</text>
			<text @click.stop="toPrivacy('privacyPolicy')">《隐私权政策》</text>
			<text @click.stop="toPrivacy('registrationPolicy')">《用户注册服务协议》</text>
		</view>

		<up-modal title="请阅读并同意" :show="show" :showCancelButton="true" confirmText="同意并继续">
			<template>
				<view class="" style="color: #666666;padding-bottom: 40rpx">
					《隐私权政策》《用户注册服务协议》
				</view>
			</template>
			<template #confirmButton>
				<view class="footerBtns">
					<view class="cancel" @click="show = false">
						取消
					</view>
					<view class="confirm" @click="confirmHandler">
						同意并继续
					</view>
				</view>
			</template>
		</up-modal>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from "vue"
	import { onShow } from "@dcloudio/uni-app";
	import { test } from 'uview-plus';
	//api
	import { phoneLogin, wxLogin, takeCode, getPrivacyPolicy } from "@/api/login/index"
	import { routers } from "@/api/app/index"
	import type { PhoneLoginParams } from "@/api/login/types"
	//hooks
	import useViewModel from "./hooks/useViewModel"
	import useAppModel from "@/appHooks/useViewModel"
	let { getUserInfo } = useAppModel()
	//store
	import { useSystemStore } from "@/store/useSystemStore";
	const systemStore = useSystemStore();
	import { useUserInfoStore } from "@/store/useUserInfoStore.ts";
	const userStore = useUserInfoStore();
	let {
		rules,
		seconds,
		start,
		end,
		tips,
		codeChange,
		toPrivacy
	} = useViewModel()
	//是否勾选
	let checkboxValue1 = ref<boolean[]>([false])
	//
	let show = ref<boolean>(false)
	//form表单
	let formRef = ref()
	//登录方式
	let loginWay = ref<number>(0)

	//手机号登录参数
	let loginParams = ref<PhoneLoginParams>({
		phoneNumber: '',
		validCode: ''
	})
	
	//获取路由
	let getRouters = (): void => {
		routers().then((res: any) => {
			let target = res.data || []
			let { children = [] } = target[0] ? target[0] : {}
			systemStore.setRouters(children)
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/projectList/index'
				})
			}, 1000)
		})
	}

	//获取用户信息
	let getUserInfoHandler = () => {
		getUserInfo().then(res => {
			getRouters()
			
		})
	}

	//同意隐私协议
	let confirmHandler = () => {
		if (!checkboxValue1.value[0]) {
			checkboxValue1.value[0] = true
			uni.setStorageSync('checkboxValue1', true)
		}
		phoneLogin(loginParams.value).then((res : any) => {
			let { code, token } = res
			if (code == 200) {
				userStore.setToken(token)
				uni.setStorageSync("wxToken", token)
				uni.showToast({
					title: '登录成功！'
				})
				getUserInfoHandler()
				
			}
		}).finally(() => {
			show.value = false
		})
	}

	//手机号登录
	let phoneLoginFn = () : void => {
		formRef.value.validate().then(valid => {
			if (valid) {
				if (!checkboxValue1.value[0]) {
					show.value = true
				} else {
					confirmHandler()
				}

			} else {

			}
		}).catch(() => {
		});

	}

	//获取手机号
	let getphonenumber = (e) : void => {
		let { code } = e.detail
		wxLogin({ wxCode: code }).then(res => {
			console.log('获取手机号', e)
		})
	}

	//获取验证码
	const uCodeRef = ref(null);


	const getCode = () => {
		if (uCodeRef.value.canGetCode) {
			let { phoneNumber } = loginParams.value
			if (!phoneNumber) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
			} else if (!test.mobile('13845678900')) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
			} else {
				uni.showLoading({
					title: '正在获取验证码',
				});
				let params = {
					bizCode: "SIM_LOGIN",
					phoneNumber: phoneNumber,
				};
				takeCode(params).then(res => {
					let { code, msg } = res as any
					if (code == 200) {
						uni.$u.toast('验证码已发送');
						uCodeRef.value.start();
					} else {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					}
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading();
					}, 2000)
				})
			}
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};

	//勾选
	let changeCheckbox = (e) => {
		// let [value] = e
		checkboxValue1.value = e
	}

	//开关
	let flagChechkbox = () => {
		checkboxValue1.value[0] = !checkboxValue1.value[0]

	}



	onShow(() => {
		checkboxValue1.value = [(uni.getStorageSync('checkboxValue1'))]
	})
	onMounted(() => {
		formRef.value.setRules(rules)
	})
</script>

<style lang="scss" scoped>
	.page-content {
		position: relative;

		.back {
			width: 100vw;
			height: 100vh;
			display: block;
		}

		.back-mask {
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			z-index: 1;
		}

		.loginMain {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			z-index: 2;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;

			.loginWay {
				width: 480rpx;
				margin-top: 40rpx;

				.wxlogin {
					button {
						width: 100%;
						border: none;
						border-radius: 20rpx;
					}
				}
			}

			.form {
				width: 90%;
				padding: 40rpx;
				box-sizing: border-box;
				height: auto;
				overflow: hidden;
				position: relative;

				.formTitle {
					position: relative;
					z-index: 10;
					text-align: center;
					font-size: 40rpx;
					font-weight: bold;
					color: #fff;
					margin-bottom: 80rpx;
				}

				& ::v-deep .u-form-item__body {
					padding: 0 !important;


				}

				.loginOperate {
					width: 100%;
					margin-top: 40rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					.phoneLoginHandler {
						width: calc(50% - 10rpx);
						height: 90rpx;
						margin-right: 10rpx;
						line-height: 90rpx;
						text-align: center;
						color: #fff;
						background: rgba(255, 255, 255, 0.3);
						border-radius: 10rpx;
					}

					.loginHandler {
						width: calc(50% - 10rpx);
						height: 90rpx;
						line-height: 90rpx;
						margin-left: 10rpx;
						text-align: center;
						border-radius: 10rpx;
					}
				}

			}
		}

		.check-box {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 36rpx;
			text-align: center;
			z-index: 3;
			font-size: 24rpx;
			color: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			::v-deep .u-checkbox-group {
				width: fit-content;
			}

			::v-deep .u-checkbox {
				width: fit-content;
			}
		}

		::v-deep .footerBtns {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			height: 80rpx;

			.cancel {
				width: 50%;
				text-align: center;
				padding-right: 32rpx;
			}

			.confirm {
				width: 50%;
				height: 100%;
				line-height: 80rpx;
				text-align: center;
				background-color: #005edf;
				color: #fff;
				border-radius: 999px;
			}
		}
	}
</style>